<template>
  <div class="container">
    <baleTable
      :tableData="tableData"
      :tableHead="tableHeadOrderList"
      :isSearch="true"
      :isTableRowClick="true"
      :tableLoading="tableLoading"
      :page="page"
      @pageSizeChange="pageSizeChange"
      @handleCurrentChange="handleCurrentChange"
      @searchMethods="searchMethods"
      @handleRowClick="handleRowClick"
      ref="baleTable"
    >
      <template #totalDetail="{ scope }">
        <div @click.stop="">
          <el-popover placement="top-start" width="200" trigger="hover">
            <div
              v-for="(item, index) in scope.row.price_detailCopy"
              :key="index"
            >
              {{ item.name }}:{{ item.value }}
            </div>
            <el-button size="small" type="primary" slot="reference"
              >价格详情</el-button
            >
          </el-popover>
        </div>
      </template>

      <template #unit_id="{ scope }">
        {{ scope.row.unit.name }}
      </template>

      <template #status="{ scope }">
        <el-tag :type="formatterStatus(scope.row.status).type">
          {{ formatterStatus(scope.row.status).name }}</el-tag
        >
      </template>
      <template #finish_time="{ scope }">
        {{
          scope.row.finish_time ? scope.row.finish_time : scope.row.cancel_time
        }}
      </template>
      <template #caozuo="{ scope }">
        <div class="flex">
          <div @click.stop="">
            <el-button
              type="primary"
              size="small"
              @click="showDialogPrescription(scope.row)"
              >处方列表</el-button
            >
          </div>
          <div @click.stop="" class="ml15">
            <el-button
              type="primary"
              size="small"
              @click="showDialog(scope.row)"
              >进入问诊间</el-button
            >
          </div>
        </div>
      </template>
    </baleTable>
    <orderDetail ref="orderDetail" @refresh="getTableData"></orderDetail>
    <enterConsultation
      ref="enterConsultation"
      @refresh="getTableData"
    ></enterConsultation>
    <showDialogPrescription
      ref="showDialogPrescription"
      @refresh="getTableData"
    />
  </div>
</template>

<script>
import { tableHeadOrderList } from "./config";
import { ApiAdminOrderList, ApiGetDoctorOrderInfoByID } from "@a/index";
import orderDetail from "./component/detail.vue";
import enterConsultation from "./component/enterConsultation.vue";
import showDialogPrescription from "./component/showDialogPrescription.vue";
import useWsSocket from "../../../socket/index.js";
import bus from "@/bus";
const WS = useWsSocket();
export default {
  components: {
    orderDetail,
    enterConsultation,
    showDialogPrescription,
  },
  provide() {
    return {
      WS: WS,
    };
  },

  data() {
    return {
      tableHeadOrderList,
      activeNames: "",
      formInline: {},
      page: {
        page: 1,
        size: 25,
        total: 0,
      },
      searchParams: {},
      sortParams: {},
      tableLoading: false,
      tableData: [],
      statusFormatter: [
        {
          name: "待支付",
          code: "1",
          type: "danger",
        },
        {
          name: "进行中",
          code: "2",
          type: "warning",
        },
        {
          name: "已完成",
          code: "3",
          type: "",
        },

        {
          name: "已取消",
          code: "4",
          type: "danger",
        },
        {
          name: "已评价",
          code: "5",
          type: "",
        },
        {
          name: "退款中",
          code: "6",
          type: "danger",
        },
      ],
    };
  },
  mounted() {
    this.getTableData();
    bus.$on("loginOut", function () {
      WS.exit();
    });
  },

  methods: {
    //切换下拉框
    /*   getData() {
        const index1 = this.tableHeadOrderList.findIndex(
          (item) => item.prop === "status"
        );
        if (index1 >= 0) {
          this.tableHeadOrderList[index1].searchOptions = this.statusFormatter;
        }
      }, */
    formatterStatus(val) {
      let data = this.statusFormatter.find((item) => {
        if (item.code == val) {
          return item;
        }
      });
      if (data) {
        return data;
      } else {
        return val;
      }
    },

    //订单列表
    getTableData(params = {}) {
      let postParams = {
        ...this.formInline,
        ...this.sortParams,
        ...this.page,
        ...params,
        ...this.searchParams,
        type: "pay",
      };
      this.tableLoading = true;
      this.tableData = [];
      ApiAdminOrderList(postParams)
        .then((res) => {
          let { data, page } = res;
          this.tableData = data;
          this.page.total = page.total;
          this.tableLoading = false;
        })
        .finally(() => {
          this.tableLoading = false;
        });
    },

    searchMethods(params) {
      this.searchParams = {};
      this.page.page = 1;
      //重置当前订单数据
      this.searchParams = params;
      this.getTableData();
    },
    pageSizeChange(val) {
      this.page.size = val;
      this.getTableData();
    },
    handleCurrentChange(val) {
      this.page.page = val;
      this.getTableData();
    },

    //订单详情列表查看
    handleRowClick(row) {
      ApiGetDoctorOrderInfoByID(row.row.id).then((res) => {
        if (res.data) {
          this.$refs.orderDetail.show(res.data);
        }
      });
    },
    showDialog(row) {
      this.$refs.enterConsultation.show(row);
    },
    showDialogPrescription(row) {
      /*  this.$router.push({
         name: "prescriptionList",
         query: {
           order_id: row.id,
         }
       }); */
      this.$refs.showDialogPrescription.show(row);
    },
  },
};
</script>
<style></style>
